@extends('layouts.'.getTheme())
@section('css')
<link href="{{asset(getThemeAssets('dataTables/datatables.min.css', true))}}" rel="stylesheet">
<style type="text/css">
	
</style>
@endsection
@section('content')
<div class="row wrapper border-bottom white-bg page-heading">
  <div class="col-lg-10">
    <h2>{!!trans('alarm.title')!!}</h2>
    <ol class="breadcrumb">
        <li>
            <a href="{{url('admin')}}">{!!trans('home.title')!!}</a>
        </li>
        <li class="active">
            <strong>{!!trans('alarm.title')!!}</strong>
        </li>
    </ol>
  </div>
  <div class="col-lg-2">
    <div class="title-action">

    </div>
  </div>
</div>
<!-- ajax实时测点值信息获取 -->
<div class="wrapper wrapper-content animaed">
  <div class="row">
    <div class="col-lg-12">
        <div class="ibox-title">
          <h5>{!!trans('alarm.alarm_answer')!!}</h5>
          <div class="ibox-tools">
            <a class="collapse-link">
              <i class="fa fa-chevron-up"></i>
            </a>
            <a class="close-link">
                <i class="fa fa-times"></i>
            </a>
          </div>
        </div>  
        <div class="ibox-content">
            <div class="alert alert-info fade in">
                <button type="button" class="close" data-dismiss="alert">
                    <span aria-hidden="true">&times;</span>
                </button>
                <!-- 当前电气室所有回路详情。电流温度颜色变红即为报警状态！！3s刷新一次，或者点击手动刷新。 -->
            </div>
                      <!-- @include('flash::message') -->
          <!-- {!! $html->table(['class' => 'table table-striped table-bordered table-hover']) !!} -->
            <!-- <button onclick="alltimedata(this)" class="btn btn-primary">点击刷新</button> -->
            <div class="table-responsive">
            <table id="alarm-log-table" class="table table-striped table-bordered nowrap" width="100%" width="100%">

                    <thead>
                    <tr>
                        <td>报警时刻</td>
                        <td>回路id</td>
                        <td>回路名称</td>
                        <td>温度检测</td>
                        <td>烟雾检测</td>
                        <td>传统明火检测</td>
                        <td>近红外明火报警</td>
                        <td>响应状态</td>
                        <td>操作</td>
                    </tr>
                    </thead>
                    <tbody>

                    </tbody>

                </table>                
            </div>
     
        </div>      
    </div>
  </div>
</div>
<!-- 系统所有测点信息 -->
<div class="wrapper wrapper-content animated">
  <div class="row">
    <div class="col-lg-12">
      <div class="ibox">
        <div class="ibox-title">
          <h5>{!!trans('alarm.alarm_history')!!}</h5>
          <div class="ibox-tools">
            <a class="collapse-link">
              <i class="fa fa-chevron-up"></i>
            </a>
            <a class="close-link">
                <i class="fa fa-times"></i>
            </a>
          </div>
        </div>
        <div class="ibox-content">
          <!-- @include('flash::message') -->
          <!-- {!! $html->table(['class' => 'table table-striped table-bordered table-hover']) !!} -->
        <div class="table-responsive">
        <table id="alarm-info-table" class="table table-striped table-bordered nowrap" width="100%">
                        <thead>
                        <tr>
                            <td>报警信息</td>
                            <td>开始时间</td>
                            <td>确认用户</td>
                            <td>结束时间(报警消除)</td>
                        </tr>
                        </thead>
                        <tbody>

                        </tbody>
        </table>          
        </div>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection
@section('js')
  <!-- <script src="{{asset(getThemeAssets('plugins/jquery.dataTables.js', true))}}"></script> -->
  <script src="{{asset(getThemeAssets('dataTables/datatables.min.js', true))}}"></script>
  <script src="{{asset(getThemeAssets('layer/layer.js', true))}}"></script>
  <script type="text/javascript">
    $(document).on('click','.destroy_item',function() {
      var _item = $(this);
      var title = "{{trans('common.deleteTitle').trans('user.slug')}}？";
      layer.confirm(title, {
        btn: ['{{trans('common.yes')}}', '{{trans('common.no')}}'],
        icon: 5
      },function(index){
        _item.children('form').submit();
        layer.close(index);
      });
    });
  </script>
  <script>
       $(document).ready(function () {
        $(function () {   
        var tables;
        createtable(); 
        setInterval(function(){
            // $('#alarm-log-table').dataTable().fnDestroy();
            // tables.html(" ");
            createtable();
            },
            50000);
        function createtable() {
            // tables.html(" ");

            tables = $('#alarm-log-table').dataTable({
            // 定时刷新
            "destroy":true,
            'bLengthChange': false,
            'ajax': {
                'url': "{{url('/alarm/alltimeinfo')}}",
            },
            'pageLength': 8,
            'headers': {'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')},
            'columns': [
                {"data": "start_time"},
                {"data": "monitor_id"},
                {"data": "loop_name"},
                {"data": "cable_temp"},
                {"data": "smoke"},
                {"data": "fire"},
                {"data": "near_infrared"},
                {"data": "status"},
                {"data": "mobile_phone"}
            ],
            'columnDefs': [{
                "targets": 3,
                "render": function (data, type, full, meta) {
                    if (data == 1) {
                        return "<label class='label label-danger'>温度异常</label>"
                    } else {
                        return "<label class='label label-success'>正常</label>"
                    }
                }
            },{
                "targets": 4,
                "render": function (data, type, full, meta) {
                    if (data == 1) {
                        return "<td><label class='label label-danger'>气体异常</label></td>"
                    } else {
                        return "<td><label class='label label-success'>正常</label></td>"
                    }
                }
            },{
                "targets": 5,
                "render": function (data, type, full, meta) {
                    if (data == 1) {
                        return "<td><label class='label label-danger'>存在明火</label></td>"
                    } else {
                        return "<td><label class='label label-success'>正常</label></td>"
                    }
                }
            },{
                "targets": 6,
                "render": function (data, type, full, meta) {
                    if (data==1) {
                        return "<td><label class='label label-danger'>存在明火</label></td>"
                    } else {
                        return "<td><label class='label label-success'>正常</label></td>"
                    }
                }
            },{
                "targets": 7,
                "render": function (data, type, full, meta) {
                    switch(data){
                        case 0:
                            return "<label class='label label-danger'>发起</label>";
                        case 1:
                            return "<label class='label label-warning'>未确认</label>";
                        case 2:
                            return "<label class='label label-success'>确认</label>";
                        case 3:
                            return "<label class='label label-primary'>暂无报警</label>";
                    }
                }
            },{
                "targets": 8,
                "render": function (data, type, full, meta) {
                    if (data==0) {
                        return "<td>暂无报警</td>";
                    } else {
                        // var audio = document.getElementById("bgmusic");
                        // audio.play();
                        return "<td>邮件已发送，<button class='btn btn-primary' type='button' id='cancel' onclick='cancel()'>确认消除</button></td>";
                    }
                }
            }]
        })


        
        // $('#alarm-info-table').dataTable({
        //     'destroy': false,
        //     'bLengthChange': false,
        //     'ajax': {
        //         'url': "{{url('/alarm/alltimeinfo')}}"
        //     },
        //     'pageLength': 10,
        //     'columns': [
        //         {"data": "alarm_info"},
        //         {"data": "start_time"},
        //         {"data": "user_id"},
        //         {"data": "confirm_time"},
        //     ]
        // })

        // timeouts.push(setTimeout("process()",1000))//注十秒刷新数据             
        }
    });
});
  </script>
  <script type="text/javascript">
        // 监听button的ajax提交事件
        function cancel() {
        // $('#cancel').click(function(event) {
            $.ajax({
            url: "{{url('/admin/alarm/cancel')}}",
            type: 'GET',
            // async: false,
            dataType: 'json',
            data: {},
            headers: {
                        'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                    },
            success: function(res) {
                if (res['res']) {
                    alert('success!');
                    window.location.reload();
                }
                else alert('error,请确认各项指标恢复正常！');
            }
            })
        // });            
        }

  </script>
  {!! $html->scripts() !!}
@endsection
